import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {FolderStack} from '@hadss/react_native_adaptive_layout';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgb(39, 135, 217)',
  },
  videoContainer: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    backgroundColor: 'rgb(100, 135, 217)',
  },
  videoText: {
    fontSize: 25,
    color: 'white',
    textAlign: 'center',
  },
  controlBar: {
    height: '100%',
    width: '100%',
  },
  controlText: {
    fontSize: 25,
    textAlign: 'center',
    width: '100%',
    height: 50,
  },
});

const FolderStackDemo = (): JSX.Element => {
  return (
    <View style={[styles.videoContainer]}>
      <FolderStack
        upperItems={['upperitemsId']}
        enableAnimation={true}
        autoHalfFold={true}
        alignContent="End"
        onFolderStateChange={(foldStatus): void => {
          console.warn(
            `onFolderStateChange params is ${JSON.stringify(foldStatus)}`,
          );
        }}
        onHoverStatusChange={(HoverStatus): void => {
          console.warn(
            `onHoverStatusChange params is ${JSON.stringify(HoverStatus)}`,
          );
        }}>
        {/* 上半屏视频区域 */}
        <View
          style={[styles.videoContainer, {backgroundColor: 'rgb(0, 74, 175)'}]}
          id="upperitemsId">
          <Text style={styles.videoText}>video zone</Text>
        </View>

        {/* 下半屏操作区域 */}
        <View
          style={[styles.controlBar, {justifyContent: 'flex-start'}]}
          id="2">
          <Text
            style={[
              styles.controlText,
              {backgroundColor: 'rgb(213, 213, 213)'},
            ]}>
            video title
          </Text>
        </View>

        <View
          style={[styles.controlBar, {justifyContent: 'flex-end', zIndex: 5}]}
          id="3">
          <Text
            style={[
              styles.controlText,
              {backgroundColor: 'rgb(213, 213, 213)'},
            ]}>
            video bar
          </Text>
        </View>
      </FolderStack>
    </View>
  );
};

export default FolderStackDemo;
